<template>
  <div class="merchandise-management views-container" v-loading="loading">
    <div class="wlm-table">
      <el-select v-model="value" placeholder="请选择" style="width:350px;">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="pullbtn">拉取</el-button>
          <el-date-picker
            v-model="time"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
      <div class="wlm-table-content">
        <el-table style="width:100%;margin-top:10px;" :data="tableData">
          <el-table-column label="景区ID">
            <template slot-scope="scope">
              <span>{{ scope.row.ParkID }}</span>
            </template>
          </el-table-column>
          <el-table-column label="景区名称">
            <template slot-scope="scope">
              <span>{{ scope.row.ParkName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品ID">
            <template slot-scope="scope">
              <span>{{ scope.row.ProductID }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品编码">
            <template slot-scope="scope">
              <span>{{ scope.row.ProductCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品名称">
            <template slot-scope="scope">
              <span>{{ scope.row.ProductName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品结算价">
            <template slot-scope="scope">
              <span>{{ scope.row.ProductPrice }}</span>
            </template>
          </el-table-column>
           <el-table-column label="游玩日期">
            <template slot-scope="scope">
              <span>{{ scope.row.Date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品门市价">
            <template slot-scope="scope">
              <span>{{ scope.row.StandardPrice }}</span>
            </template>
          </el-table-column>
           <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="onclickbtn(scope.row.ticket_id,scope.row.ProductCode,scope.row.ProductName)">加入票务商品</el-button>
                </template>
           </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
         <el-pagination
          @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10,20,50]"
            :page-size="per_page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ticketGet, otaGoodsList,ticketGoodsSave } from "@/api/cloudservice";

export default {
  data() {
    return {
      time:'',
      value: "",
      options: [],
      tableData: [],
      currentPage:1,
      total:0,
      per_page:1,
      loading: false
    };
  },
  created() {
    this.$nextTick(() => {
      this.ticketGetbtn();
    });
  },
  methods: {
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
         this.loading = true;
      otaGoodsList({ id: this.value, page: 1, list_rows: val})
        .then(res => {
          if (res.data.code == 1) {
            this.loading = false;
            this.tableData = res.data.data.data;
            this.currentPage = Number(res.data.data.current_page)
            this.per_page = Number(res.data.data.per_page)
            this.total = res.data.data.total
          }
        })
        .finally(() => {
          this.loading = false;
        });
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
         this.loading = true;
         
      otaGoodsList({ id: this.value, page: val, list_rows: 10 })
        .then(res => {
          if (res.data.code == 1) {
            this.loading = false;
            this.tableData = res.data.data.data;
            this.currentPage = Number(res.data.data.current_page)
            this.per_page = Number(res.data.data.per_page)
            this.total = res.data.data.total
          }
        })
        .finally(() => {
          this.loading = false;
        });
      },
    ticketGetbtn() {
      ticketGet({ all: "all", type: 3 }).then(res => {
        if (res.data.code == 1) {
          // console.log("惊魂甫定几乎都是",res.data.data)
          this.options = res.data.data;
        }
      });
    },
    pullbtn() {
      this.loading = true;
            //     this.time.map(item=>{
            //     time.push(new Date(item).getTime())
            // })
          let time=this.time==''?this.time='':new Date(this.time).getTime()
      console.log("发的范德萨发", time);

      otaGoodsList({ id: this.value, page: 1, list_rows: 10,time:time})
        .then(res => {
          if (res.data.code == 1) {
            this.loading = false;
            console.log("佛挡杀佛",res.data)
            // if(res.data.data.lenght==0){
            //   this.tableData=[]
            // }else{
            // this.tableData = res.data.data.data;
            // }
            this.tableData = res.data.data.data;
            this.currentPage = Number(res.data.data.current_page)
            this.per_page = Number(res.data.data.per_page)
            this.total = res.data.data.total
          }
        }).catch(()=>{
              this.tableData=[]
               this.total=0
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onclickbtn(ticket_id,ProductCode,ProductName){
        this.loading = true;
        ticketGoodsSave({type:3,ticket_id:ticket_id,info_id:ProductCode,goods_name:ProductName}).then(res=>{
            if(res.data.code==1){
                this.loading = false
                console.log("发肯定还是放到计算",res.data.data)
                this.$message.success("操作成功！")
            }
        }).finally(()=>{
            this.loading = false
        })
    }
  }
};
</script>
<style scoped></style>
